<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>登陆与注册</title>
<link rel="stylesheet" href="js/layui-2.5.4/css/layui.css">
<script src="js/layui-2.5.4/layui.js"></script>
<style type="text/css">
input:focus {
	border-style: solid;
	border-color: #03a9f4;
	box-shadow: 0 0 15px #03a9f4;
}
</style>
</head>
<body
	style="background: url(../images/login/305197.jpg) no-repeat; background-size: 100%;">
	<div class="layui-layout layui-layout-admin">
		<h1 style="position: fixed; left: 65%; top: 10%; color: white;">xxxxxx系统</h1>
		<div class="layui-tab layui-tab-brief layui-col-md5"
			lay-filter="docDemoTabBrief"
			style="border: 1px solid #e9d7ad; background: white; position: fixed; left: 50%; top: 20%; box-shadow: 6px 5px 10px #e9d7ad;">
			<ul class="layui-tab-title">
				<li class="layui-this layui-col-md6">登陆</li>
				<li class="layui-col-md6">注册</li>
			</ul>
			<div class="layui-tab-content">
				<!-- 登陆界面 -->
				<div class="layui-tab-item layui-show">
					<form class="layui-form layui-col-md9" action="">
						<div class="layui-form-item " style="margin-top: 50px"></div>
						<div class="layui-form-item layui-col-md-offset1">
							<label class="layui-form-label ">姓名：</label>
							<div class="layui-input-block ">
								<input type="text" name="title" required lay-verify="required"
									placeholder="请输入姓名" autocomplete="off" class="layui-input ">
							</div>
						</div>
						<div class="layui-form-item layui-col-md-offset1">
							<label class="layui-form-label">密码：</label>
							<div class="layui-input-block">
								<input type="password" name="password" required
									lay-verify="required" placeholder="请输入密码" autocomplete="off"
									class="layui-input">
							</div>
						</div>
						<div class="layui-form-item layui-col-md-offset1">
							<label class="layui-form-label ">验证码：</label>
							<div class="layui-input-block">
								<input type="text" name="title" required lay-verify="required"
									placeholder="请输入验证码" autocomplete="off"
									class="layui-input layui-col-md6" style="width: 50%;">
								<img id="cpacha-img1"
									src="../system/get_cpacha?vl=4&w=144&h=37&type=accountLoginCpacha"
									class="code" style="cursor: pointer;" />
								<!-- position: absolute; right: 0px; top: 150px; -->
							</div>

						</div>
						<div class="layui-form-item"
							style="text-align: center; margin-top: 50px">
							<div class="layui-input-block">
								<button class="layui-btn" lay-submit lay-filter="formDemo">登陆</button>
								<button type="reset" class="layui-btn layui-btn-primary">重置</button>
							</div>
						</div>
					</form>
				</div>
				<!--  注册界面-->
				<div class="layui-tab-item">内容2</div>
			</div>
		</div>
		<div class="layui-footer"
			style="background-color: transparent; text-align: center;">
			<!-- 底部固定区域 -->
			------------------------------------------------------------©
			yunyiqing.com - 底部固定区域
		</div>
	</div>
	<script type="text/javascript">
	
		layui.use([ 'jquery', 'layer', 'form', 'element' ], function() {
			// 加载layui模块，使用其推荐的【预先加载】方式，详见官网【模块规范】一节
			var $ = layui.$;
			var layer = layui.layer;
			var form = layui.form;
			var element = layui.element;
			/*加载验证码  */
			$('#cpacha-img1').on(
					'click',
					function() {
						$(".code").attr(
								"src",
								'../system/get_cpacha?vl=4&w=144&h=40&type=accountLoginCpacha&t='
										+ new Date().getTime());
					});
			/* intput显示颜色#009688 */
			/* 			$("input").focus(function(){
			 $(this).prop("outline-color","#009688");
			 }); */
		});
	</script>
</body>
</html>